<template>
	<view style="background-color: #F7F7F9;">
		<loading :is_init="is_init">

		</loading>

		<view class="" v-if="is_init">



			<view class="head">
				<view class="flex j-b a-c f28 cff" style="padding-left: 50rpx;padding-right: 50rpx;padding-top: 25rpx;">
					<text>同城电话</text>
					<text>一键直连</text>
					<text>服务品质</text>
				</view>
			</view>
			<view class="p20   " style="margin-top: -120rpx;">
				<view class=" p20" style="background-color: #fff;border-radius: 35rpx;">
					<view class=" flex">
						<view class="" style="width: 150rpx;height: 150rpx;">
							<image style="height: 150rpx;width: 150rpx;" class="b_y" :src="find.shop_img|getImg">
							</image>
						</view>
						<view class="l50 ml2">
							<view class="flex j-b" style="width: 530rpx;">
								<text class="m_20 shop-list-name f34">{{find.shop_name}}</text>
							</view>
							<view class="flex j-b pt1" style="width: 530rpx;">
								<text class="f26 m_20 c7">主营：{{find.shop_tag}}</text>
							</view>
							<view class="flex j-b pt1" style="width: 530rpx;">
								<text class="f26 m_20 c7">营业时间:{{find.business_time}}</text>
							</view>
						</view>
					</view>
					<view class="" style="height: 30rpx;">
					</view>
					<view class="  flex a-c j-b" style="background-color: #fff;border-radius: 35rpx;">
						<view class="flex a-c">
							<view class="flex a-c" style="width: 50rpx; ">
								<text class="c_pl icon iconfont  f30 c_zt">&#xe6ae;</text>
							</view>
							<view class="" style="width: 530rpx; ">
								<text class="f28 c7">{{find.shop_addr}}</text>
							</view>
						</view>
					</view>
				</view>

			</view>
			<view class="hengxian" style="height: 10rpx;"></view>
			<view class=""
				style="position: -webkit-sticky; position: sticky;top: 0px;background-color: #fff;z-index: 10;">
				<view class="p20 flex a-c" style="background-color: #fff;">
					<view @click="ontab(0)" :class="tabIndex== 0? 'isxz' : 'iswxz'" class="ml20 ">
						<text class="f34">商家码</text>
					</view>
				</view>

			</view>
			<view class="hengxian" style="height: 5rpx;"></view>
			<view style="background-color: #fff;">
				<view class="flex j-c a-c" style="padding-top: 80rpx;">

					<!-- #ifdef MP-WEIXIN -->
					<image style="width: 180px;height: 180px;" :src="find.ma_img" mode=""></image>
					<!-- #endif -->


					<!-- #ifndef MP-WEIXIN -->
					<sete style="margin-top: -14rpx;" :qrPath.sync="qrPath" :text="text" :size="size" :quality="quality"
						:colorDark="colorDark" :colorLight="colorLight"></sete>
					<!-- #endif -->



				</view>
				<view class="" style="height: 400rpx;">

				</view>
			</view>




			<view class="" style="height: 130rpx;"></view>
			<view class="dibu" style="height: 140rpx;">
				<view class="p10  flex ">
					<view class="flex j-s p10" style="width: 100%;">
						<view class="t_c" @click="on_sc" style="width: 180rpx;">
							<text class="bicon f40 cf5">&#xe64c;</text>
							<view class="c_z f28 f800">{{find.is_collection==0? ' 收藏':'取消收藏' }}</view>
						</view>
						<view @click="on_tel(find.shop_tel)" class="flex a-c j-c b_y f800 f28 cff"
							style="width:380rpx;height: 100rpx;background-color: #0071FE;">
							<text>拨打电话</text>
						</view>

					</view>
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	import sete from '@/common/yz-qr/yz-qr.vue';

	export default {
		components: {
			sete
		},
		data() {
			return {
				find: {},
				tabIndex: 0,
				//二维码相关参数
				qrPath: '',
				text: '',
				size: 200,
				quality: 'L',
				colorDark: '#000000',
				colorLight: '#ffffff',
				is_init: false

			}
		},
		onShareAppMessage(res) {
			return {
				title: this.find.shop_name,
				path: '/pages/banmitongcheng/shop_view?id=' + this.id,
				imageUrl: this.find.shop_img,
			}
		},

		onShareTimeline(res) {
			return {
				title: this.find.shop_name,
				path: '/pages/banmitongcheng/shop_view?id=' + this.id,
				imageUrl: this.find.shop_img,
			}
		},
		onLoad(options) {
			// #ifdef MP-WEIXIN
			wx.showShareMenu({
				withShareTicket: true,
				menus: ["shareAppMessage", "shareTimeline"]
			})
			// #endif
			var that = this;
			if (options && options.id) {
				this.id = parseInt(options.id);
				if (this.id) {
					that.init();
				}
			}

		},

		methods: {

			init() {
				let requestParams = {
					id: this.id
				};
				this.Http.post('/plugin.php/banmitongcheng/api/index/ViewAjax', requestParams).then(ret => {

					if (ret.status == 200) {
						this.find = ret.data.find;

						// #ifdef MP-WEIXIN
						if (ret.data.wx_code_img == 0) {
							uni.showModal({
								title: '提示',
								content: '微信小程序码生成失败,请检查appid和AppSecret是否填写',
								success: function(res) {

								}
							});
						}
						// #endif

						this.text = ret.url+'/h5/banmitongcheng/#/pages/banmitongcheng/shop_view?id='+this.find.id;
						



					} else {
						uni.showModal({
							title: '提示',
							content: ret.msg,
							success: function(res) {
								if (res.confirm) {
									uni.switchTab({
										url: '/pages/index/index'
									})
								}
							}
						});
					}
					this.is_init = true
				})
			},
			on_sc() {
				if (!uni.getStorageSync('token')) {
					uni.navigateTo({
						url: '/pages/banmi/user_login'
					})
					return
				}
				var that = this;
				let requestParams = {
					shop_id: this.id,
				};
				this.Http.post('/plugin.php/banmitongcheng/api/index/shop_collection_add', requestParams).then(ret => {

					if (ret.status == 200) {
						that.find.is_collection = 1;
					} else if (ret.status == 100) {
						that.find.is_collection = 0;
					}
				})
			},
			on_tel(phone) {

				uni.makePhoneCall({
					phoneNumber: phone,
					success: function() {

					}

				})

			},


			ontab(index) {
				this.tabIndex = index;
			},

			daohang() {


			},

		},
		onNavigationBarButtonTap(e) {

		}
	}
</script>

<style scoped>
	.head {
		background-color: #0071FE;
		height: 200rpx;
		width: 750rpx;
		border-bottom-left-radius: 35rpx;
		border-bottom-right-radius: 35rpx;
	}

	.fk_img {
		margin-right: -10rpx;
	}

	.dibu {
		position: fixed;
		bottom: 0;
		background-color: #FFFFFF;
		height: 120rpx;
		width: 100%;
		border-top: solid 1rpx #f2f2f2;
	}

	.isxz {
		border-bottom: solid 8rpx #FFD821;
		height: 45rpx;
		font-weight: 800;
		padding-bottom: 50rpx;
	}

	.iswxz {
		padding-bottom: 50rpx;
		border-bottom: solid 8rpx #fff;
		height: 45rpx;
		color: #767676;
		font-weight: 800;
	}
</style>